<template>
	<view class="container flex ai-c jc-c">
		<view class="content" :style="{ background: getBackground() }">
			<view class="pws">
				排位赛<text style="font-size: 26rpx;margin:0 16rpx">五人场</text>排名
			</view>
			<view class="hshqhz">
				还未获得任何勋章
			</view>
			<!-- 排名表格 -->
			<view class="ranking-table">
				<view class="table-header jc-sb">
					<view style="flex: 3;" class="flex">
						<view class="header-cell">排名</view>
						<view class="header-cell" style="margin-left: 16rpx;">姓名</view>
					</view>
					<view style="flex: 3;" class="flex">
						<view class="header-cell" style="width: 60rpx;">正确</view>
						<view class="header-cell" style="margin-left: 16rpx;width: 60rpx;">错误</view>
						<view class="header-cell" style="margin-left: 16rpx;width: 60rpx;">未做</view>
					</view>

					<view class="header-cell flex ai-c jc-fd" style="width: 104rpx;">用时</view>
				</view>

				<view>
					<view v-for="(item, index) in rankingData" :key="index" class="table-row flex jc-sb"
						:class="{ 'my-row': item.isMe }">
						<view class="flex" style="flex: 3;">
							<view class="rank-cell">
								<view class="rank-number">
									<image v-if="item.rank === 1" style="width: 56rpx;height: 56rpx;"
										src="/static/diyiminghuangguan.png"></image>
									<image v-else-if="item.rank === 2" style="width: 56rpx;height: 56rpx;"
										src="/static/diermingxioaguan.png"></image>
									<view v-else style="width: 56rpx;height: 56rpx;" class="flex ai-c jc-c">{{ item.rank
										}}</view>
								</view>
							</view>
							<view class="name-cell" style="margin-left: 16rpx;">{{ item.name }}</view>
						</view>
						<view class="flex" style="flex: 3;">
							<view class="header-cell flex ai-c jc-c" style="width: 60rpx;">{{ item.correct }}</view>
							<view class="header-cell flex ai-c jc-c" style="margin-left: 16rpx;width: 60rpx;;">{{
								item.wrong }}</view>
							<view class="header-cell flex ai-c jc-c" style="margin-left: 16rpx;width: 60rpx;;">{{
								item.unanswered }}
							</view>
						</view>


						<view class="header-cell flex ai-c jc-fd" style="width: 104rpx;">{{ item.time }}</view>
					</view>
				</view>
			</view>

			<view class="qresult flex ai-fd">
				<view class="qrcode">
					<uqrcode ref="uqrcodeRef" canvas-id="writeOffQRCode" :value="qrCodeValue" :size="90"
						:options="qrCodeOptions" @ready="onQRCodeReady" @error="onQRCodeError">
					</uqrcode>
				</view>
				<image src="/static/mixibasaomiaoer.png" style="width: 216rpx;height: 76rpx;"></image>
			</view>
			<!-- <image src="/static/xiaoxingxingwuyanliuse.png"
				style="width: 240rpx;height:240rpx;position: absolute;top: -80rpx;right: 40rpx;"></image> -->
			<image src="/static/xyingysd.png"
				style="width: 240rpx;height:240rpx;position: absolute;top: -80rpx;right: 40rpx;"></image>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref, nextTick, onMounted } from 'vue'
// 排名数据
import uqrcode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode.vue';
import api from '@/api'
import {
		BASE_URL
	} from '@/utils/request'

	import { useUserStore } from '@/store/index.js'
	const userStore = useUserStore()



const rankingData = ref([
	{
		rank: 1,
		name: '我',
		correct: 15,
		wrong: 0,
		unanswered: 0,
		time: '02:15',
		isMe: true
	},
	{
		rank: 2,
		name: 'bbbbbbbb',
		correct: 15,
		wrong: 0,
		unanswered: 0,
		time: '02:16',
		isMe: false
	},
	{
		rank: 3,
		name: 'cccc',
		correct: 14,
		wrong: 1,
		unanswered: 0,
		time: '02:10',
		isMe: false
	},
	{
		rank: 4,
		name: 'dddddddd',
		correct: 13,
		wrong: 0,
		unanswered: 2,
		time: '01:15',
		isMe: false
	},
	{
		rank: 5,
		name: 'eeeeeee',
		correct: 13,
		wrong: 2,
		unanswered: 0,
		time: '01:20',
		isMe: false
	},
	{
		rank: 5,
		name: 'eeeeeee',
		correct: 13,
		wrong: 2,
		unanswered: 0,
		time: '01:20',
		isMe: false
	},
	{
		rank: 5,
		name: 'eeeeeee',
		correct: 13,
		wrong: 2,
		unanswered: 0,
		time: '01:20',
		isMe: false
	},
	{
		rank: 5,
		name: 'eeeeeee',
		correct: 13,
		wrong: 2,
		unanswered: 0,
		time: '01:20',
		isMe: false
	},
	{
		rank: 5,
		name: 'eeeeeee',
		correct: 13,
		wrong: 2,
		unanswered: 0,
		time: '01:20',
		isMe: false
	},
	{
		rank: 5,
		name: 'eeeeeee',
		correct: 13,
		wrong: 2,
		unanswered: 0,
		time: '01:20',
		isMe: false
	},
])

const getBackground = () => {
	return `radial-gradient(51% 18% at 38% 21%, #FDB88C 23%, rgba(237, 87, 87, 0) 100%), radial-gradient(22% 52% at 16% 60%, #F77F7F 0%, rgba(197, 17, 104, 0) 100%), radial-gradient(55% 101% at 15% 5%, #FFB773 0%, rgba(255, 97, 97, 0.5753) 42%, rgba(253, 139, 121, 0) 100%, rgba(0, 0, 0, 0) 100%), radial-gradient(39% 70% at 64% 63%, #FF4F43 0%, rgba(238, 137, 137, 0.5353) 47%, rgba(255, 61, 197, 0) 100%), radial-gradient(75% 75% at 45% 52%, #FF8585 0%, rgba(255, 150, 150, 0) 100%), radial-gradient(52% 52% at 72% 89%, #F37B95 0%, rgba(255, 73, 231, 0) 100%), radial-gradient(69% 69% at 4% 86%, #E89BFD 0%, rgba(255, 128, 144, 0) 100%), radial-gradient(29% 88% at 94% 10%, #FF50B0 3%, rgba(159, 77, 54, 0) 100%), linear-gradient(0deg, #FFE74D, #FFE74D), rgba(238, 64, 64, 0.04);`
}
// 二维码相关数据
const qrCodeValue = ref('https://www.baidu.com')
const qrCodeOptions = ref({
	margin: 10
})
const userInfo = ref(uni.getStorageSync('userInfo'))
// 组件引用
const uqrcodeRef = ref(null)

// 二维码准备就绪
const onQRCodeReady = () => {
	console.log('二维码准备就绪')
	// 组件准备就绪后，自动生成二维码
	nextTick(() => {
		if (uqrcode.value && typeof uqrcode.value.make === 'function') {
			console.log('组件准备就绪，开始生成二维码')
			uqrcode.value.make({
				success: () => {
					console.log('初始二维码生成成功')
					uni.showToast({
						title: '二维码生成成功',
						icon: 'success',
						duration: 1000
					})
				},
				fail: (error) => {
					console.error('初始二维码生成失败:', error)
				}
			})
		} else {
			console.error('组件准备就绪但引用未获取到')
		}
	})
}

// 二维码错误处理
const onQRCodeError = (error) => {
	console.error('二维码生成错误:', error)
	uni.showToast({
		title: '二维码生成失败',
		icon: 'none',
		duration: 2000
	})
}

onLoad((options) => {
	console.log('页面加载完成')
	// 如果有参数传入，更新二维码内容

	api.getsharelist({
		room_id: options.room_id,
		user_id: userStore.userInfo.id
	}).then(res => {
		console.log(res)
		rankingData.value = res.data.list.map(item => {
			return {
				rank: item.ming,
				name: item.nickname,
				correct: item.correct,
				wrong: item.lose,
				unanswered: item.unde,
				time: item.time,
				isMe: item.user_id == userStore.userInfo.id
			}
		})
	})
})

onMounted(() => {
	console.log('组件挂载完成')
	// 由于使用了 @ready 事件，这里只需要确保组件引用获取
	nextTick(() => {
		if (uqrcode.value) {
			console.log('组件引用获取成功:', uqrcode.value)
		} else {
			console.log('等待组件引用...')
		}
	})
})
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100vh;
	background-color: #000;
}

.qresult {
	padding: 32rpx;
}

.qrcode {
	width: 140rpx;
	height: 140rpx;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 30rpx;
}

.content {
	position: relative;
	width: 90%;
	border-radius: 32rpx;
	box-sizing: border-box;
	padding: 32rpx 0;
	background: radial-gradient(51% 18% at 38% 21%, #BAFD8C 23%, rgba(199, 237, 87, 0) 100%), radial-gradient(22% 52% at 16% 60%, #7FF7C5 0%, rgba(17, 197, 134, 0) 100%), radial-gradient(55% 101% at 15% 5%, #73FFBB 0%, rgba(145, 162, 15, 0.5753) 42%, rgba(253, 247, 121, 0) 100%, rgba(0, 0, 0, 0) 100%), radial-gradient(39% 70% at 64% 63%, #72FF43 0%, rgba(149, 238, 137, 0.5353) 46%, rgba(126, 255, 61, 0) 100%), radial-gradient(75% 75% at 45% 52%, #85FFDC 0%, rgba(166, 255, 150, 0) 100%), radial-gradient(52% 52% at 72% 89%, #81F37B 0%, rgba(73, 255, 249, 0) 100%), radial-gradient(69% 69% at 4% 86%, #9BFDB8 0%, rgba(128, 246, 255, 0) 100%), radial-gradient(29% 88% at 94% 10%, #41D16C 0%, rgba(54, 159, 93, 0) 100%), linear-gradient(0deg, #CAFFDC, #CAFFDC), rgba(139, 238, 64, 0.04);
}

.pws {
	font-size: 58rpx;
	font-weight: 700;
	color: #000;
	margin-bottom: 10rpx;
	padding: 0 32rpx;
	box-sizing: border-box;
}

.hshqhz {
	font-size: 28rpx;
	color: #000;
	margin-bottom: 38rpx;
	padding: 0 32rpx;
	box-sizing: border-box;
}

// 排名表格样式
.ranking-table {
	width: 100%;
	border-radius: 24rpx;
	overflow: hidden;
}

.table-header {
	display: flex;
	padding: 32rpx;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	;
	margin-bottom: 20rpx;
}

.header-cell {
	font-size: 28rpx;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.8);
}

.table-row {
	display: flex;
	transition: background-color 0.2s;
	padding: 0 32rpx;
	padding-top: 0;

	&.my-row {
		.name-cell {
			color: #0F50DC;
			font-size: 48rpx;
			font-weight: 700;
		}

		.rank-number {
			color: #0F50DC;
			font-size: 48rpx;
			font-weight: 700;
		}

		.header-cell {
			color: #0F50DC;
			font-size: 48rpx;
			font-weight: 700;
		}
	}
}

.rank-cell,
.name-cell,
.score-cell,
.time-cell {
	padding: 10rpx 0;
	text-align: center;
	font-size: 26rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.action-buttons {
	display: flex;
	gap: 24rpx;
	width: 100%;
	max-width: 600rpx;
}

.action-btn {
	flex: 1;
	height: 92rpx;
	line-height: 92rpx;
	text-align: center;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.view-ranking {
	background: #fff;
	color: #666;
	border: 2rpx solid #ccc;
}

.view-ranking:hover {
	background: #f5f5f5;
	border-color: #ccc;
}

.play-again {
	background: #0F50DC;
	color: #fff;
}

.play-again:hover {
	background: #0F50DC;
	color: #fff;
}

.rank-cell {
	.rank-number {
		position: relative;
		font-weight: 600;

		&.rank-first {
			color: #ffd700;
		}

		&.rank-second {
			color: #c0c0c0;
		}

		&.rank-third {
			color: #cd7f32;
		}

		.crown {
			font-size: 32rpx;
			margin-right: 8rpx;

			&.gold {
				color: #ffd700;
			}

			&.silver {
				color: #c0c0c0;
			}

			&.bronze {
				color: #cd7f32;
			}
		}
	}
}

.name-cell {
	justify-content: flex-start;
	// padding-left: 16rpx;
	font-weight: 500;
	color: #212529;
}

.time-cell {
	color: #495057;
	font-family: 'Courier New', monospace;
}
</style>
